<template>
  <div class="steam-curing-control-container">
    <ScreenConditions :isDataType="false">
      <template slot="conditions">
        <a-select
          v-model="prodLineNum"
          showSearch
          allowClear
          placeholder="请选择生产线"
          @change="prodLineChange()"
          :loading="prodLineLoading"
        >
          <a-select-option
            :value="item.dicValue"
            v-for="item in prodLineSource"
            :key="item.id"
          >
            {{ item.dicDesc }}
          </a-select-option>
        </a-select>
        <a-select
          v-model="beamNo"
          placeholder="请选择梁号"
          @change="search"
          :loading="beamLoading"
          allowClear
          showSearch
        >
          <a-select-option
            :value="item"
            v-for="(item, index) in beamSource"
            :key="index"
          >
            {{ item }}
          </a-select-option>
        </a-select>
      </template>
      <template slot="operate">
        <a-button type="primary" @click="search()"> 查询 </a-button>
        <a-button
          type="primary"
          :loading="dataLoading"
          @click="batchDownload()"
        >
          数据下载
        </a-button>
        <a-button
          type="primary"
          @click="detailDownload()"
          style="margin-left: 6px"
          :loading="mxLoading"
        >
          明细数据下载
        </a-button>
      </template>
    </ScreenConditions>
    <div class="table-container">
      <div class="header" header="养生数据"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="dicDesc" title="生产线" width="150"> </vxe-column>
          <vxe-column field="equName" title="养生设备名称" width="180">
          </vxe-column>
          <vxe-column field="type" title="养生类型" width="150">
            <template #default="{ row }">
              {{ checkType(row.type) }}
            </template>
          </vxe-column>
          <vxe-column field="componentParts" title="梁号" width="180">
          </vxe-column>
          <vxe-column title="养生时间" min-width="200">
            <template #default="{ row }">
              {{ row.minColTime }}~{{ row.maxColTime }}
            </template>
          </vxe-column>
          <vxe-column field="hourLength" title="养生时长（分）" width="180">
          </vxe-column>
          <vxe-column field="warmUpTime" title="升温时长（分）" width="180">
          </vxe-column>
          <vxe-column field="warmDownTime" title="降温时长（分）" width="180">
          </vxe-column>
          <vxe-column
            field="warmConstantTime"
            title="恒温时长（分）"
            width="180"
          >
          </vxe-column>
          <vxe-column field="avgTmp" title="平均温度（℃）" width="180">
          </vxe-column>
          <vxe-column field="maxTmp" title="最高温度（℃）" width="180">
          </vxe-column>
          <vxe-column field="minTmp" title="最低温度（℃）" width="180">
          </vxe-column>
          <vxe-column field="avgRh" title="平均湿度（%RH）" width="180">
          </vxe-column>
          <vxe-column field="maxRh" title="最高湿度（%RH）" width="180">
          </vxe-column>
          <vxe-column field="minRh" title="最低湿度（%RH）" width="180">
          </vxe-column>
          <vxe-column field="avgTmpOut" title="环境平均温度（℃）" width="180">
          </vxe-column>
          <vxe-column field="maxTmpOut" title="环境最高温度（℃）" width="180">
          </vxe-column>
          <vxe-column field="minTmpOut" title="环境最低温度（℃）" width="180">
          </vxe-column>
          <vxe-column field="avgRhOut" title="环境平均湿度（%RH）" width="180">
          </vxe-column>
          <vxe-column field="minRhOut" title="环境最高湿度（%RH）" width="180">
          </vxe-column>
          <vxe-column field="maxRhOut" title="环境最低湿度（%RH）" width="180">
          </vxe-column>
          <vxe-column field="operate" width="200" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoAnalysis(row)">
                  温度分析
                </a-button>
                <a-button type="link" @click="gotoDetails(row)">
                  数据明细
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
import { _getUUID, downLoadFileByArraybuffer } from "@/utils";
import { getDickeyList } from "@/api/common.js";
import {
  getHealthList,
  getZYBeamNoList,
  steamCuringDownLoad,
  ysMXDownLoad,
} from "@/api/wisdom-beam/collect-app.js";
export default {
  data() {
    return {
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      //梁号
      beamSource: [],
      beamLoading: false,
      beamNo: undefined,
      //生产线
      prodLineSource: [],
      prodLineNum: undefined,
      prodLineLoading: false,
      //
      mxLoading: false,
      dataLoading: false,
    };
  },
  watch: {
    $route: {
      handler(val) {
        // 判断查询条件是否存在 读缓存
        if (sessionStorage.getItem("SEARCH_FLAG")) {
          let {
            beamNo = undefined,
            page,
            pageSize,
          } = JSON.parse(sessionStorage.getItem("PAGE_STATE"));
          this.beamNo = beamNo;
          this.pager.page = page;
          this.pager.pageSize = pageSize;
        } else {
          this.pager.page = 1;
          this.pager.pageSize = 10;
        }
        this.getProdLine();
        this.getBeamNo();
        this.getTableData();
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    checkType(type) {
      switch (type) {
        case "1":
          return "蒸汽";

        case "2":
          return "喷淋";

        default:
          return "--";
      }
    },
    //明细数据下载
    detailDownload() {
      this.mxLoading = true;
      let { prodLineNum = "", beamNo = "" } = this;
      ysMXDownLoad({
        prodLineNum,
        componentParts: beamNo,
        equType: "17",
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "养生明细数据");
        })
        .catch((_) => {})
        .finally((_) => {
          this.mxLoading = false;
        });
    },

    //数据下载
    batchDownload() {
      this.dataLoading = true;
      let { prodLineNum = "", beamNo = "" } = this;
      steamCuringDownLoad({
        prodLineNum,
        componentParts: beamNo,
        equType: "17",
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "蒸养数据");
        })
        .catch((_) => {})
        .finally((_) => {
          this.dataLoading = false;
        });
    },

    //查询生产线
    getProdLine() {
      this.prodLineLoading = true;
      getDickeyList({ dictKey: "TASK_MANAGER_TZ" })
        .then((res) => {
          let { data } = res;
          this.prodLineSource = data?.result || [];
          if (sessionStorage.getItem("SEARCH_FLAG")) {
            let { prodLineNum } = JSON.parse(
              sessionStorage.getItem("PAGE_STATE")
            );
            this.prodLineNum = prodLineNum;
          }
        })
        .catch((_) => {
          this.prodLineSource = [];
        })
        .finally((_) => {
          this.prodLineLoading = false;
        });
    },

    //查询梁号
    getBeamNo() {
      this.beamLoading = true;
      let { prodLineNum = "" } = this;
      getZYBeamNoList({ prodLineNum, equType: "17" })
        .then((res) => {
          let { data } = res;
          this.beamSource = (data?.result ?? []).filter((v) => v);
        })
        .catch((_) => {
          this.beamSource = [];
        })
        .finally((_) => {
          this.beamLoading = false;
        });
    },
    prodLineChange() {
      this.beamNo = undefined;
      this.pager.page = 1;
      this.getBeamNo();
      this.getTableData();
    },
    search() {
      //优先‘清除标识’和‘搜索条件’
      sessionStorage.removeItem("SEARCH_FLAG");
      sessionStorage.removeItem("PAGE_STATE");

      this.pager.page = 1;
      this.getTableData();
    },
    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { prodLineNum = "", beamNo = "" } = this;
      return new Promise((resolve, reject) => {
        getHealthList({
          page,
          pageSize,
          prodLineNum,
          componentParts: beamNo,
          equType: "17",
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.records || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },
    //数据分析
    gotoAnalysis(row) {
      let { componentParts } = row;
      let { prodLineNum } = this;
      //保留查询条件
      this.setCacheSearchCondition();
      this.$router.push({
        path: `/nebula/wisdom-beam-app/steamCuring/temperatureAnalysis`,
        query: {
          prodLineNum: prodLineNum,
          componentParts: componentParts,
        },
      });
    },
    //数据明细
    gotoDetails(row) {
      let { componentParts } = row;
      let { prodLineNum } = this;
      //保留查询条件
      this.setCacheSearchCondition();
      this.$router.push({
        path: `/nebula/wisdom-beam-app/steamCuring/dataDetails`,
        query: {
          prodLineNum: prodLineNum,
          componentParts: componentParts,
        },
      });
    },
    //监听分页
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //页面跳转缓存查询条件
    setCacheSearchCondition() {
      let { prodLineNum, beamNo } = this;
      let { page, pageSize } = this.pager;
      sessionStorage.setItem(
        "PAGE_STATE",
        JSON.stringify({
          prodLineNum,
          beamNo,
          page,
          pageSize,
        })
      );
    },
  },
  destroyed() {
    sessionStorage.removeItem("SEARCH_FLAG");
  },
};
</script>

<style lang="less" scoped>
.steam-curing-control-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 10px 10px 10px;
  overflow: hidden;
  .table-container {
    margin-top: 10px;
    flex: 1;
    .flex();
    flex-direction: column;
    background-color: #fff;
    .header {
      padding: 28px 20px;
      background-color: #fff;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .main {
      flex: 1;
      height: 100%;
    }
    .pager-container {
      flex-shrink: 0;
    }
  }
}
</style>
